<template>
	<div style="background-color: #000;padding-bottom: 3em;">
		<div style="height: 3em;"></div>
		<div>
			<image src="/static/imgs/car.png" style="width: 100%;" mode="widthFix"></image>
		</div>
		<div
			style="text-align: center;margin: 0 auto;margin: 0.5em;border-radius: 0.5em;background-color: #fff;padding-bottom: 2em;margin-top: 0;">
			<div>
				<image :src="api.getUrl() + carParams?.brPic" style="width: 5em;height: 5em;"></image>
			</div>
			<div>{{carParams.brBrand}} - {{carParams.chexing}}</div>
			<div style="font-size: 1.5em;color: red;margin-top: 0.3em;">{{zjine}}</div>
		</div>
		<div style="background-color: #fff;margin: 0.5em;padding: 0.5em;">
			<div style="text-align: center;">车身改色膜</div>
			<div style="margin-top: 0.5em;">
				<uni-data-select v-model="seriesDefault" :localdata="seriesData"
					@change="seriesChange"></uni-data-select>
			</div>
		</div>
		<div>
			<template v-for="(item,index) in objs" :key="index">
				<div style="margin: 0 auto;margin: 0.5em;background-color: #fff;border-radius: 0.5em;">
					<div style="display: flex;">
						<div style="width: 50%;padding: 0.5em;box-sizing: border-box;">
							<div style="font-weight: bold;margin-top: 0.3em;">{{ item.partName }}</div>
							<div style="color: #ccc;"></div>
						</div>
						<div style="width: 30%;text-align: center;">
							<image :src="api.getUrl() + item.partImg" style="width: 4em;height: 4em;"></image>
						</div>
						<div style="width: 20%; text-align: right;margin-right: 0.5em;margin-top: 1.4em;">
							{{ item.partMoney }}
						</div>
					</div>
				</div>
			</template>
		</div>


	</div>
	<CustomTabbar ref="customTabbar">
	</CustomTabbar>
</template>

<script setup>
	//=====顶部和底部内容加载开始======//
	import api from '@/common/httprequest.js'
	import CustomTabbar from '@/component/custom-tabbar.vue'
	
	import {
		onMounted,
		ref,
		reactive
	} from 'vue'

	let carParams = reactive({});
	
	
	let seriesDefault = ref(null);
	let seriesData = reactive([])
	let zjine = ref(null);
	let objs = reactive([])
	const loadData = (seId) => {
		objs.splice(0, objs.length);
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "post",
			url: "/app/money/list",
			params: {
				moId: carParams.chexingId, //车型id
				seId: seId, //系列id
			},
		}).then(res => {
			uni.hideLoading();
			console.log('resaa', res);
			if (res.code == 200) {
				var list = res.data;
				if (list.length > 0) {
					zjine.value = "￥" + list[0].partMoney;
				}

				objs.push(...list);
				console.log('objs', objs);
			} else {
				uni.showToast({
					icon: 'none',
					duration: 2000,
					title: '数据查询失败！'
				})
			}

		});
	}
	onMounted(() => {
		let query = getCurrentPages().pop().options;
		if (query.carParams) {
			let carObj = JSON.parse(query.carParams);
			carParams = Object.assign(carParams, carObj);
		}
		if (query.seriesData) {
			let seriesObjs = JSON.parse(query.seriesData);
			console.log('seriesObjs', seriesObjs);
			for (var i = 0; i < seriesObjs.length; i++) {
				seriesData.push({
					"value": seriesObjs[i].id,
					"text": seriesObjs[i].seriesName
				});
			}
			if (seriesObjs.length > 0) {
				seriesDefault.value = seriesObjs[0].id;
			}

		}
		console.log('carParams', carParams);

		
		if (seriesData.length > 0) {
			loadData(seriesData[0].value);
		}

	})

	const seriesChange = (e) => {
		loadData(e);
	}
</script>

<style scoped>
</style>